<template>
  <div class="index-container">
    <!-- 顶部导航栏 -->
    <el-header class="main-header">
      <div class="header-logo">
        <img src="@/assets/rabbit-logo.svg" alt="兔溯源" class="logo">
        <h1>爱吃兔溯源管理系统</h1>
      </div>
      <div class="header-user">
        <span class="welcome-text">
          欢迎您，{{ counterstore.userinfo.username }}
          <el-tag size="small" effect="plain" type="danger" class="role-tag">角色：{{ counterstore.userinfo.RoleAllName
          }}</el-tag>
        </span>
        <el-button type="danger" size="small" @click="Out" class="logout-btn">
          <el-icon>
            <SwitchButton />
          </el-icon>
        </el-button>
      </div>
    </el-header>

    <div class="main-container">
      <el-container>
        <!-- 侧边栏菜单 -->
        <el-aside width="220px" class="main-sidebar">
          <el-menu active-text-color="#fff" background-color="#4a9668" class="el-menu-vertical" default-active="2"
            text-color="#f0f9e8" router>
            <div class="sidebar-header">
              <i class="el-icon-menu">📋</i>
              <span>系统功能导航</span>
            </div>
            <el-sub-menu v-for="item in MenuData" :index="item.id">
              <template #title>
                <el-icon>
                  <ChromeFilled />
                </el-icon>
                <span>{{ item.permissionName }}</span>
              </template>
              <el-menu-item v-for="item1 in item.children" :index="item1.url" class="menu-item">
                <el-icon v-if="item1.url == '/Permission'">
                  <Unlock />
                </el-icon>
                <el-icon v-else-if="item1.url == '/Role'">
                  <Location />
                </el-icon>
                <el-icon v-else-if="item1.url == '/User'">
                  <User />
                </el-icon>
                <el-icon v-else>
                  <Document />
                </el-icon>
                <span>{{ item1.permissionName }}</span>
              </el-menu-item>

            </el-sub-menu>
            <!-- 
      <el-sub-menu index="2">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>溯源信息</span>
          </template>
           <el-menu-item index="3" class="menu-item">
              <el-icon><Menu /></el-icon>
              <span>溯源管理</span>
            </el-menu-item>
            
        </el-sub-menu>

          <el-menu-item index="4" class="menu-item">
              <el-icon><Setting /></el-icon>
              <span>设置</span>
            </el-menu-item> -->


          </el-menu>



        </el-aside>

        <!-- 主内容区域 -->
        <el-main class="main-content">
          <div class="content-wrapper">
            <keep-alive>
              <RouterView />
            </keep-alive>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  User,
  Menu as IconMenu,
  Location,
  Unlock,
  ChromeFilled,
  Document,
  SwitchButton,
  Menu,
  Setting
} from '@element-plus/icons-vue'

import { useRouter, RouterView } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { ElMessage, ElMessageBox } from 'element-plus'
import { readB } from "@/https/http"

const counterstore = useCounterStore();
const router = useRouter();



const MenuData = ref([
  {
    "id": 0,
    "permissionName": "",
    "url": "",
    "children": [
      {
        "id": 0,
        "permissionName": "",
        "url": "",
        "children": [
          {
            "id": 0,
            "permissionName": "",
            "url": "",
            "children": []
          }
        ]
      }
    ]
  }
]);

//获取菜单权限
const MenuPermission = () => {
  try {
    //检查roleIds是否存在
    if (!counterstore.userinfo.roleIds) {
      console.error('roleIds不存在，可能未正确登录');
      router.push("/");
      return;
    }
    
    //转化为数组集合
    var roleids = JSON.parse(counterstore.userinfo.roleIds.toString())
    console.log(roleids)
    // 将数据转换为JSON字符串,并设置请求头Content-Type
    readB.post("/RBACMenganment/GetMenuPermission", {
      roleIds: roleids  // 直接传递对象,不需要手动转JSON
    }).then(res => {
      if (res.data.code == 200) {
        MenuData.value = res.data.data
      }
    }).catch(err => {
      console.error('获取菜单权限失败:', err)
      ElMessage.error('获取菜单权限失败，请重新登录');
      router.push("/");
    })
  } catch (error) {
    console.error('处理菜单权限时出错:', error)
    ElMessage.error('系统错误，请重新登录');
    router.push("/");
  }
}

//钩子函数
onMounted(() => {
  MenuPermission();
})

const Out = () => {
  ElMessageBox.confirm(
    '确定退出登录吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      router.push("/");
    })
    .catch(() => {
      // 用户取消操作
    })
}


</script>

<style scoped>
.index-container {
  min-height: 100vh;
  height: 100vh;
  background: linear-gradient(135deg, #f9fbf7 0%, #edf8e8 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.index-container::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50,30 C55,10 75,10 80,30 C85,10 95,20 90,40 C95,50 90,70 80,70 C75,80 55,80 50,70 C45,80 25,80 20,70 C10,70 5,50 10,40 C5,20 15,10 20,30 C25,10 45,10 50,30 Z" fill="rgba(74,150,104,0.05)"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  top: -100px;
  right: -100px;
  transform: rotate(30deg);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

.index-container::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M30,30 C40,20 60,20 70,30 C80,40 80,60 70,70 C60,80 40,80 30,70 C20,60 20,40 30,30 Z" fill="rgba(103,194,58,0.05)"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  bottom: -50px;
  left: -50px;
  transform: rotate(-15deg);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

.main-header {
  background: linear-gradient(90deg, #4a9668 0%, #67c23a 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.header-logo {
  display: flex;
  align-items: center;
}

.header-logo .logo {
  width: 40px;
  height: 40px;
}

.header-logo h1 {
  margin: 0 0 0 10px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.header-user {
  display: flex;
  align-items: center;
}

.welcome-text {
  margin-right: 15px;
  font-size: 14px;
}

.role-tag {
  margin-left: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
}

.logout-btn {
  border-radius: 20px;
}

.main-container {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
}

.main-sidebar {
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 5;
}

.sidebar-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #3d7d56;
  color: white;
  font-weight: bold;
}

.sidebar-header i {
  margin-right: 8px;
}

.el-menu-vertical {
  border-right: none;
  height: 100%;
}

.menu-item {
  margin: 8px 0;
  border-radius: 0 20px 20px 0;
  margin-right: 10px;
}

.menu-item:hover {
  background-color: #3d7d56 !important;
}

.main-content {
  padding: 20px;
  background-color: transparent;
  position: relative;
  z-index: 1;
  overflow: auto;
  flex: 1;
}

.content-wrapper {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  height: calc(100% - 40px);
  overflow: auto;
}
</style>
